import React, { useEffect, useRef } from 'react';
import G6 from '@antv/g6';

const PushPath = () => {
  const container: any = useRef(null);
  useEffect(() => {
    console.log('更新更新');

    const data = {
      nodes: [
        {
          id: 'node1',
          label: '参数中心',
          rectFill: '#C6E5FF',
          rectStroke: '#5B8FF9',
          textFill: '#00BFFF',
          x: 445,
          y: 40,
        },
        {
          id: 'node1-1',
          label: '子集副本中心\nLine应用单元(001)',
          rectFill: '#32c5ff1a',
          rectStroke: '#32c5ff',
          textFill: '#32c5ff',
          x: 175,
          y: 140,
        },
        {
          id: 'node1-2',
          label: '子集副本中心\nLine网关单元(902)',
          rectFill: '#32c5ff1a',
          rectStroke: '#32c5ff',
          textFill: '#32c5ff',
          x: 445,
          y: 140,
        },
        {
          id: 'node1-3',
          label: '子集副本中心\nLine公共单元(904)',
          rectFill: '#32c5ff1a',
          rectStroke: '#32c5ff',
          textFill: '#32c5ff',
          x: 805,
          y: 140,
        },
        {
          id: 'node1-1-1',
          label: '信用卡中心(018)',
          rectFill: '#44d7b61a',
          rectStroke: '#44d7b6',
          textFill: '#44d7b6',
          x: 85,
          y: 240,
        },
        {
          id: 'node1-1-2',
          label: '内联平台(800)',
          rectFill: '#44d7b61a',
          rectStroke: '#44d7b6',
          textFill: '#44d7b6',
          x: 265,
          y: 240,
        },
        {
          id: 'node1-2-1',
          label: '管理网关(808)',
          rectFill: '#44d7b61a',
          rectStroke: '#44d7b6',
          textFill: '#44d7b6',
        },
        {
          id: 'node1-3-1',
          label: '计算流程引擎(890)',
          rectFill: '#44d7b61a',
          rectStroke: '#44d7b6',
          textFill: '#44d7b6',
          x: 625,
          y: 240,
        },
        {
          id: 'node1-3-2',
          label: '智能规则引擎(820)',
          rectFill: '#44d7b61a',
          rectStroke: '#44d7b6',
          textFill: '#44d7b6',
        },
        {
          id: 'node1-3-3',
          label: '风控限额服务(070)',
          rectFill: '#44d7b61a',
          rectStroke: '#44d7b6',
          textFill: '#44d7b6',
          x: 985,
          y: 240,
        },
      ],
      edges: [
        {
          id: 'edge1',
          source: 'node1',
          target: 'node1-1',
          style: {
            // 边线条颜色
            stroke: '#32c5ff',
            endArrow: {
              path: 'M 0,0 L 8,4 L 8,-4 Z',
              fill: '#32c5ff', // 箭头填充色
              arrowSolid: true, // 箭头是否实心
            },
            // 边线条转弯
            path: [
              ['M', 445, 40], // M 命令表示移动到指定坐标
              ['L', 445, 90], // L 命令表示画一条直线到指定坐标
              ['L', 175, 90],
              ['L', 175, 120],
            ],
          },
        },
        {
          id: 'edge2',
          source: 'node1',
          target: 'node1-2',
          style: {
            stroke: '#32c5ff',
            endArrow: {
              path: 'M 0,0 L 8,4 L 8,-4 Z',
              fill: '#32c5ff', // 箭头填充色
              arrowSolid: true, // 箭头是否实心
            },
          },
        },
        {
          id: 'edge3',
          source: 'node1',
          target: 'node1-3',
          style: {
            stroke: '#32c5ff',
            endArrow: {
              path: 'M 0,0 L 8,4 L 8,-4 Z',
              fill: '#32c5ff', // 箭头填充色
              arrowSolid: true, // 箭头是否实心
            },
            path: [
              ['M', 445, 40], // M 命令表示移动到指定坐标
              ['L', 445, 90], // L 命令表示画一条直线到指定坐标
              ['L', 805, 90],
              ['L', 805, 120],
            ],
          },
        },
        {
          id: 'edge4',
          source: 'node1-1',
          target: 'node1-1-1',
          style: {
            stroke: '#44d7b6',
            endArrow: {
              path: 'M 0,0 L 8,4 L 8,-4 Z',
              fill: '#44d7b6', // 箭头填充色
              arrowSolid: true, // 箭头是否实心
            },
            path: [
              ['M', 175, 160],
              ['L', 175, 190],
              ['L', 85, 190],
              ['L', 85, 220],
            ],
          },
        },
        {
          id: 'edge5',
          source: 'node1-1',
          target: 'node1-1-2',
          style: {
            stroke: '#44d7b6',
            endArrow: {
              path: 'M 0,0 L 8,4 L 8,-4 Z',
              fill: '#44d7b6', // 箭头填充色
              arrowSolid: true, // 箭头是否实心
            },
            path: [
              ['M', 175, 160],
              ['L', 175, 190],
              ['L', 265, 190],
              ['L', 265, 220],
            ],
          },
        },
        {
          id: 'edge6',
          source: 'node1-2',
          target: 'node1-2-1',
          style: {
            stroke: '#44d7b6',
            endArrow: {
              path: 'M 0,0 L 8,4 L 8,-4 Z',
              fill: '#44d7b6', // 箭头填充色
              arrowSolid: true, // 箭头是否实心
            },
          },
        },
        {
          id: 'edge7',
          source: 'node1-3',
          target: 'node1-3-1',
          style: {
            stroke: '#44d7b6',
            endArrow: {
              path: 'M 0,0 L 8,4 L 8,-4 Z',
              fill: '#44d7b6', // 箭头填充色
              arrowSolid: true, // 箭头是否实心
            },
            path: [
              ['M', 805, 160],
              ['L', 805, 190],
              ['L', 625, 190],
              ['L', 625, 220],
            ],
          },
        },
        {
          id: 'edge8',
          source: 'node1-3',
          target: 'node1-3-2',
          style: {
            stroke: '#44d7b6',
            endArrow: {
              path: 'M 0,0 L 8,4 L 8,-4 Z',
              fill: '#44d7b6', // 箭头填充色
              arrowSolid: true, // 箭头是否实心
            },
          },
        },
        {
          id: 'edge9',
          source: 'node1-3',
          target: 'node1-3-3',
          style: {
            stroke: '#44d7b6',
            endArrow: {
              path: 'M 0,0 L 8,4 L 8,-4 Z',
              fill: '#44d7b6', // 箭头填充色
              arrowSolid: true, // 箭头是否实心
            },
            path: [
              ['M', 805, 160],
              ['L', 805, 190],
              ['L', 985, 190],
              ['L', 985, 220],
            ],
          },
        },
      ],
    };
    /**
     * 自定义节点
     */
    G6.registerNode(
      'rect',
      {
        draw(cfg: any, group: any) {
          const shape = group.addShape('rect', {
            attrs: {
              x: -60,
              y: -20,
              width: 120,
              height: 40,
              // 节点背景颜色
              fill: cfg.rectFill,
              // 节点边框颜色
              stroke: cfg.rectStroke,
              radius: 10,
              fontSize: 12,
            },
          });
          if (cfg.label) {
            group.addShape('text', {
              attrs: {
                textAlign: 'center',
                textBaseline: 'middle',
                text: cfg.label,
                // 文本字体颜色
                fill: cfg.textFill,
              },
            });
          }
          return shape;
        },
      },
      'single-node',
    );

    const graph = new G6.Graph({
      // 渲染图形的容器
      container: container.current,
      // 画布宽度
      width: 1400,
      // 画布高度
      height: 640,
      modes: {
        default: ['drag-canvas', 'zoom-canvas'],
      },
      // 默认状态下节点的配置
      defaultNode: {
        type: 'rect',
        size: [150, 40],
        style: {
          fill: '#C6E5FF',
          stroke: '#5B8FF9',
        },
      },
      // 默认状态下边的配置
      defaultEdge: {
        type: 'customEdge',
        // 边节点的像素大小
        size: 1,
        style: {
          // 边的终点加箭头
          endArrow: true,
        },
      },
      layout: {
        type: 'dagre',
        // 布局方式改为上下方式
        rankdir: 'TB',
        // 节点之间水平间距
        nodesep: 10,
        // 节点之间上下间距
        ranksep: 20,
      },
      fitView: true,
    });

    graph.data(data);
    graph.render();
  }, []);

  return <div ref={container}></div>;
};
export default PushPath;
